<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        DataGrid <span class="subitem">MultiViewState</span>
    </ui:define>

    <ui:define name="description">
        MultiViewState feature enables DataGrid to maintain its state across pages by setting multiViewState attribute to true. In this demo, manipulate use pagination, then visit another page and then come back to this page. DataGrid state should remain as you've left it.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datagrid"/>
    <ui:param name="widgetLink" value="DataGrid"/>

    <ui:define name="implementation">
        <div class="product card">
            <h:form id="form">
                <p:messages id="messages"/>

                <p:commandButton value="Clear multiViewSate" action="#{dataGridView.clearMultiViewState}"
                                 update="@form"/>

                <br/><br/>

                <p:dataGrid var="product" value="#{dataGridView.products}" columns="3" layout="grid"
                            rows="12" paginator="true" id="products"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="6,12,16" multiViewState="true">

                    <f:facet name="header">
                        Products for Sale
                    </f:facet>

                    <div class="product-grid-item card" style="margin-bottom: 0">
                        <div class="product-grid-item-top">
                            <div>
                                <i class="pi pi-tag product-category-icon"/>
                                <span class="product-category">#{product.category}</span>
                            </div>
                            <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                        </div>
                        <div class="product-grid-item-content">
                            <p:graphicImage name="demo/images/product/#{product.image}"/>
                            <div class="product-name">#{product.name}</div>
                            <div class="product-description">#{product.description}</div>
                            <p:rating readonly="true" value="#{product.rating}"/>
                        </div>
                        <div class="product-grid-item-bottom">
                            <h:outputText value="#{product.price}" styleClass="product-price">
                                <f:convertNumber currencySymbol="$" type="currency"/>
                            </h:outputText>
                            <p:commandButton update=":form:productDetail" oncomplete="PF('productDialog').show()"
                                             value="Add To Cart"
                                             icon="pi pi-shopping-cart"
                                             disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
                                <f:setPropertyActionListener value="#{product}"
                                                             target="#{dataGridView.selectedProduct}"/>
                            </p:commandButton>
                        </div>
                    </div>

                </p:dataGrid>

                <p:dialog header="Product Info" widgetVar="productDialog" modal="true" showEffect="fade"
                          hideEffect="fade" resizable="false">
                    <p:outputPanel id="productDetail" style="text-align:center;">
                        <p:column rendered="#{not empty dataGridView.selectedProduct}">
                            <div class="product">
                                <div class="product-grid-item card" style="margin-bottom: 0">
                                    <div class="product-grid-item-top">
                                        <div>
                                            <i class="pi pi-tag product-category-icon"/>
                                            <span class="product-category">#{dataGridView.selectedProduct.category}</span>
                                        </div>
                                        <span class="product-badge status-#{dataGridView.selectedProduct.inventoryStatus.name().toLowerCase()}">#{dataGridView.selectedProduct.inventoryStatus.text}</span>
                                    </div>
                                    <div class="product-grid-item-content">
                                        <p:graphicImage
                                                name="demo/images/product/#{dataGridView.selectedProduct.image}"/>
                                        <div class="product-name">#{dataGridView.selectedProduct.name}</div>
                                        <div class="product-description">#{dataGridView.selectedProduct.description}</div>
                                        <p:rating readonly="true" value="#{dataGridView.selectedProduct.rating}"/>
                                    </div>
                                    <div class="product-grid-item-bottom">
                                        <h:outputText value="#{dataGridView.selectedProduct.price}"
                                                      styleClass="product-price">
                                            <f:convertNumber currencySymbol="$" type="currency"/>
                                        </h:outputText>
                                        <p:commandButton update=":form:productDetail"
                                                         oncomplete="PF('productDialog').show()" value="Add To Cart"
                                                         icon="pi pi-shopping-cart"
                                                         disabled="#{dataGridView.selectedProduct.inventoryStatus == 'OUTOFSTOCK'}">
                                            <f:setPropertyActionListener value="#{dataGridView.selectedProduct}"
                                                                         target="#{dataGridView.selectedProduct}"/>
                                        </p:commandButton>
                                    </div>
                                </div>
                            </div>
                        </p:column>
                    </p:outputPanel>
                </p:dialog>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
